<template>
    <div class="content">
        <div class="top">
            <ul>
                <li>
                    <SelectIpt>
                        <p>充值状态</p>
                    </SelectIpt>
                </li>
                <li>
                    <SelectIpt>
                        <p>户号</p>
                    </SelectIpt>
                </li>
                <li>
                    <TextIpt>
                        <p>设备编号</p>
                    </TextIpt>
                </li>
                <li>
                    <TextIpt>
                        <p>订单号</p>
                    </TextIpt>
                </li>
                <li>
                    <TextIpt>
                        <p>支付人</p>
                    </TextIpt>
                </li>
            </ul>
            <div class="btn">
                <BlueBtn>查询</BlueBtn>
            </div>
        </div>
        <div class="table">
            <el-table :data="filterRecharge.slice(pages, pages + 10)" border style="width: 100%">
                <el-table-column prop="WaterOrder" label="水表订单号" width="180">
                </el-table-column>
                <el-table-column prop="Trade" label="交易订单号" width="180">
                </el-table-column>
                <el-table-column prop="waterAccount" label="水表户号" width="180">
                </el-table-column>
                <el-table-column label="支付人" width="210">
                    <template slot-scope="scope">
                        <p>{{ scope.row.Owner + '(' + scope.row.Phone + ')' }}</p>
                    </template>
                </el-table-column>
                <el-table-column prop="PayType" label="支付方式" width="120">
                </el-table-column>
                <el-table-column prop="PayDate" label="支付时间" width="180">
                </el-table-column>
                <el-table-column prop="PayNum" label="支付金额" width="120">
                </el-table-column>
                <el-table-column prop="PayState" label="支付状态" width="140">
                </el-table-column>
                <el-table-column prop="RechargeState" label="充值状态" width="140">
                </el-table-column>
                <el-table-column prop="RechargeDate" label="充值时间">
                    <template slot-scope="scope">
                        {{ scope.row.RechargeDate ? scope.row.RechargeDate : '--' }}
                    </template>
                </el-table-column>
            </el-table>
            <div class="page">
                <div class="total-page">
                    <p>共<span>{{ Math.ceil(filterRecharge.length / 10) }}</span>页/<span>{{ filterRecharge.length
                            }}</span>条数据
                    </p>
                </div>
                <el-pagination background layout="prev, pager, next,jumper" @current-change="getPage" :page-size=10
                    :current-page.sync=page :total="filterRecharge.length" hide-on-single-page>
                </el-pagination>
            </div>
        </div>
    </div>
</template>

<script>
import SelectIpt from '@/components/SelectIpt.vue';
import TextIpt from '@/components/TextIpt.vue';
import BlueBtn from '@/components/BlueBtn.vue';
export default {
    components: {
        BlueBtn,
        SelectIpt,
        TextIpt
    },
    data() {
        return {
            page:0,
            pages:0,
            allRecharge: [],
            filterRecharge: []
        }
    },
    methods: {
         //get 当前页
         getPage(page) {
            this.pages = 10 * (page - 1)
        },
        getAllData() {
            this.$axios.get('http://127.0.0.1/waterElectricity/waterRecharge', {
                headers: {
                    'Authorization': `Bearer ${localStorage.getItem('token')}`,
                    'Content-Type': 'application/json' // 如果需要发送 JSON 数据，则包含此行 // 设置请求头
                }
            }).then(res => {
                console.log(res.data);
                this.allRecharge = res.data
                this.filterRecharge = res.data
            }).catch(err => {
                console.log(err);
            })
        }
    },
    mounted() {
        this.getAllData()
    }
}
</script>

<style scoped>
.table>>>.el-table {
    min-height: 580px;
}

.page {
    display: flex;
    align-items: center;
    justify-content: end;
    margin-top: 20px;
}

.page>>>button {
    min-width: 35px !important;
    height: 25px;
    line-height: 25px;
    border-radius: 3px !important;
    border: 1px solid rgba(215, 215, 215, 1);
    background: #fff !important;
}

.page>>>.active {
    border-color: rgba(26, 135, 254, 1) !important;
    background-color: rgba(26, 135, 254, 1) !important;
    color: #fff !important;
}

.page>>>.el-pager li {
    min-width: 35px !important;
    height: 25px;
    line-height: 25px;
    border-radius: 3px !important;
    border: 1px solid rgba(215, 215, 215, 1);
    font-size: 12px;
    color: #999;
    font-weight: normal !important;
    background: #fff;
}

.total-page span {
    color: #FF3C2C;
}

.total-page {
    font-size: 12px;
    color: #666;
}

.top li {
    margin-bottom: 20px;
}
</style>